﻿<section class="section" id="grid">
    <header class="section-header row">
        <h1 class="section-title col-xs-24">
            <a href="#grid">Grid</a>
        </h1>
    </header>

    <div class="row">
        <div class="col-sm-24">
            <p>Grid system in Winstrap scales up to 24 columns.</p>
        </div>
    </div>

    <div class="row section-gallery" style="margin-top: 2em;">
        <div class="col-md-2">

            <figure class="media">
                <div class="media-img ratio-movie">
                    <a href="">
                        <img src="http://lorempixel.com/400/800/nature" alt="" />
                    </a>
                </div>

                <figcaption class="media-caption">
                    <h4 class="media-header">
                        <a href="">Header</a>
                    </h4>
                    <div class="media-subheader">
                        <a href="">Subheader</a>
                    </div>
                </figcaption>
            </figure>

        </div>

        <div class="col-md-2">

            <figure class="media">
                <div class="media-img ratio-movie">
                    <a href="">
                        <img src="http://lorempixel.com/400/800/nature" alt="" />
                    </a>
                </div>

                <figcaption class="media-caption">
                    <h4 class="media-header">
                        <a href="">Header</a>
                    </h4>
                    <div class="media-subheader">
                        <a href="">Subheader</a>
                    </div>
                </figcaption>
            </figure>

        </div>

        <div class="col-md-2">

            <figure class="media">
                <div class="media-img ratio-movie">
                    <a href="">
                        <img src="http://lorempixel.com/400/800/nature" alt="" />
                    </a>
                </div>

                <figcaption class="media-caption">
                    <h4 class="media-header">
                        <a href="">Header</a>
                    </h4>
                    <div class="media-subheader">
                        <a href="">Subheader</a>
                    </div>
                </figcaption>
            </figure>

        </div>

        <div class="col-md-2">

            <figure class="media">
                <div class="media-img ratio-movie">
                    <a href="">
                        <img src="http://lorempixel.com/400/800/nature" alt="" />
                    </a>
                </div>

                <figcaption class="media-caption">
                    <h4 class="media-header">
                        <a href="">Header</a>
                    </h4>
                    <div class="media-subheader">
                        <a href="">Subheader</a>
                    </div>
                </figcaption>
            </figure>

        </div>

        <div class="col-md-2">

            <figure class="media">
                <div class="media-img ratio-movie">
                    <a href="">
                        <img src="http://lorempixel.com/400/800/nature" alt="" />
                    </a>
                </div>

                <figcaption class="media-caption">
                    <h4 class="media-header">
                        <a href="">Header</a>
                    </h4>
                    <div class="media-subheader">
                        <a href="">Subheader</a>
                    </div>
                </figcaption>
            </figure>

        </div>

        <div class="col-md-2">

            <figure class="media">
                <div class="media-img ratio-movie">
                    <a href="">
                        <img src="http://lorempixel.com/400/800/nature" alt="" />
                    </a>
                </div>

                <figcaption class="media-caption">
                    <h4 class="media-header">
                        <a href="">Header</a>
                    </h4>
                    <div class="media-subheader">
                        <a href="">Subheader</a>
                    </div>
                </figcaption>
            </figure>

        </div>

        <div class="col-md-2">

            <figure class="media">
                <div class="media-img ratio-movie">
                    <a href="">
                        <img src="http://lorempixel.com/400/800/nature" alt="" />
                    </a>
                </div>

                <figcaption class="media-caption">
                    <h4 class="media-header">
                        <a href="">Header</a>
                    </h4>
                    <div class="media-subheader">
                        <a href="">Subheader</a>
                    </div>
                </figcaption>
            </figure>

        </div>

        <div class="col-md-2">

            <figure class="media">
                <div class="media-img ratio-movie">
                    <a href="">
                        <img src="http://lorempixel.com/400/800/nature" alt="" />
                    </a>
                </div>

                <figcaption class="media-caption">
                    <h4 class="media-header">
                        <a href="">Header</a>
                    </h4>
                    <div class="media-subheader">
                        <a href="">Subheader</a>
                    </div>
                </figcaption>
            </figure>

        </div>

        <div class="col-md-2">

            <figure class="media">
                <div class="media-img ratio-movie">
                    <a href="">
                        <img src="http://lorempixel.com/400/800/nature" alt="" />
                    </a>
                </div>

                <figcaption class="media-caption">
                    <h4 class="media-header">
                        <a href="">Header</a>
                    </h4>
                    <div class="media-subheader">
                        <a href="">Subheader</a>
                    </div>
                </figcaption>
            </figure>

        </div>

        <div class="col-md-2">

            <figure class="media">
                <div class="media-img ratio-movie">
                    <a href="">
                        <img src="http://lorempixel.com/400/800/nature" alt="" />
                    </a>
                </div>

                <figcaption class="media-caption">
                    <h4 class="media-header">
                        <a href="">Header</a>
                    </h4>
                    <div class="media-subheader">
                        <a href="">Subheader</a>
                    </div>
                </figcaption>
            </figure>

        </div>

        <div class="col-md-2">

            <figure class="media">
                <div class="media-img ratio-movie">
                    <a href="">
                        <img src="http://lorempixel.com/400/800/nature" alt="" />
                    </a>
                </div>

                <figcaption class="media-caption">
                    <h4 class="media-header">
                        <a href="">Header</a>
                    </h4>
                    <div class="media-subheader">
                        <a href="">Subheader</a>
                    </div>
                </figcaption>
            </figure>

        </div>

        <div class="col-md-2">

            <figure class="media">
                <div class="media-img ratio-movie">
                    <a href="">
                        <img src="http://lorempixel.com/400/800/nature" alt="" />
                    </a>
                </div>

                <figcaption class="media-caption">
                    <h4 class="media-header">
                        <a href="">Header</a>
                    </h4>
                    <div class="media-subheader">
                        <a href="">Subheader</a>
                    </div>
                </figcaption>
            </figure>

        </div>
    </div>

    <div class="row section-gallery">
        <div class="col-md-3">

            <figure class="media">
                <div class="media-img ratio-movie">
                    <a href="">
                        <img src="http://lorempixel.com/400/800/nature" alt="" />
                    </a>
                </div>

                <figcaption class="media-caption">
                    <h4 class="media-header">
                        <a href="">Header</a>
                    </h4>
                    <div class="media-subheader">
                        <a href="">Subheader</a>
                    </div>
                </figcaption>
            </figure>

        </div>

        <div class="col-md-3">

            <figure class="media">
                <div class="media-img ratio-movie">
                    <a href="">
                        <img src="http://lorempixel.com/400/800/nature" alt="" />
                    </a>
                </div>

                <figcaption class="media-caption">
                    <h4 class="media-header">
                        <a href="">Header</a>
                    </h4>
                    <div class="media-subheader">
                        <a href="">Subheader</a>
                    </div>
                </figcaption>
            </figure>

        </div>

        <div class="col-md-3">

            <figure class="media">
                <div class="media-img ratio-movie">
                    <a href="">
                        <img src="http://lorempixel.com/400/800/nature" alt="" />
                    </a>
                </div>

                <figcaption class="media-caption">
                    <h4 class="media-header">
                        <a href="">Header</a>
                    </h4>
                    <div class="media-subheader">
                        <a href="">Subheader</a>
                    </div>
                </figcaption>
            </figure>

        </div>

        <div class="col-md-3">

            <figure class="media">
                <div class="media-img ratio-movie">
                    <a href="">
                        <img src="http://lorempixel.com/400/800/nature" alt="" />
                    </a>
                </div>

                <figcaption class="media-caption">
                    <h4 class="media-header">
                        <a href="">Header</a>
                    </h4>
                    <div class="media-subheader">
                        <a href="">Subheader</a>
                    </div>
                </figcaption>
            </figure>

        </div>

        <div class="col-md-3">

            <figure class="media">
                <div class="media-img ratio-movie">
                    <a href="">
                        <img src="http://lorempixel.com/400/800/nature" alt="" />
                    </a>
                </div>

                <figcaption class="media-caption">
                    <h4 class="media-header">
                        <a href="">Header</a>
                    </h4>
                    <div class="media-subheader">
                        <a href="">Subheader</a>
                    </div>
                </figcaption>
            </figure>

        </div>

        <div class="col-md-3">

            <figure class="media">
                <div class="media-img ratio-movie">
                    <a href="">
                        <img src="http://lorempixel.com/400/800/nature" alt="" />
                    </a>
                </div>

                <figcaption class="media-caption">
                    <h4 class="media-header">
                        <a href="">Header</a>
                    </h4>
                    <div class="media-subheader">
                        <a href="">Subheader</a>
                    </div>
                </figcaption>
            </figure>

        </div>

        <div class="col-md-3">

            <figure class="media">
                <div class="media-img ratio-movie">
                    <a href="">
                        <img src="http://lorempixel.com/400/800/nature" alt="" />
                    </a>
                </div>

                <figcaption class="media-caption">
                    <h4 class="media-header">
                        <a href="">Header</a>
                    </h4>
                    <div class="media-subheader">
                        <a href="">Subheader</a>
                    </div>
                </figcaption>
            </figure>

        </div>

        <div class="col-md-3">

            <figure class="media">
                <div class="media-img ratio-movie">
                    <a href="">
                        <img src="http://lorempixel.com/400/800/nature" alt="" />
                    </a>
                </div>

                <figcaption class="media-caption">
                    <h4 class="media-header">
                        <a href="">Header</a>
                    </h4>
                    <div class="media-subheader">
                        <a href="">Subheader</a>
                    </div>
                </figcaption>
            </figure>

        </div>
    </div>

    <div class="row section-gallery">

        <div class="col-md-6">

            <figure class="media">
                <div class="media-img ratio-2-1">
                    <a href="">
                        <img src="http://lorempixel.com/800/400/nature" alt="" />
                    </a>
                </div>

                <figcaption class="media-caption">
                    <h4 class="media-header">
                        <a href="">Header</a>
                    </h4>
                    <div class="media-subheader">
                        <a href="">Subheader</a>
                    </div>
                </figcaption>
            </figure>

        </div>

        <div class="col-md-6">

            <figure class="media">
                <div class="media-img ratio-2-1">
                    <a href="">
                        <img src="http://lorempixel.com/800/400/nature" alt="" />
                    </a>
                </div>

                <figcaption class="media-caption">
                    <h4 class="media-header">
                        <a href="">Header</a>
                    </h4>
                    <div class="media-subheader">
                        <a href="">Subheader</a>
                    </div>
                </figcaption>
            </figure>

        </div>

        <div class="col-md-6">

            <figure class="media">
                <div class="media-img ratio-2-1">
                    <a href="">
                        <img src="http://lorempixel.com/800/400/nature" alt="" />
                    </a>
                </div>

                <figcaption class="media-caption">
                    <h4 class="media-header">
                        <a href="">Header</a>
                    </h4>
                    <div class="media-subheader">
                        <a href="">Subheader</a>
                    </div>
                </figcaption>
            </figure>

        </div>

        <div class="col-md-6">

            <figure class="media">
                <div class="media-img ratio-2-1">
                    <a href="">
                        <img src="http://lorempixel.com/800/400/nature" alt="" />
                    </a>
                </div>

                <figcaption class="media-caption">
                    <h4 class="media-header">
                        <a href="">Header</a>
                    </h4>
                    <div class="media-subheader">
                        <a href="">Subheader</a>
                    </div>
                </figcaption>
            </figure>

        </div>

    </div>

    <div class="row">
        <div class="col-sm-24">
            {{#markdown}}
```xml
<!-- Row with 12 elements -->
<div class="row section-gallery">
    <div class="col-md-2">
        …
    </div>
</div>

<!-- Row with 8 elements -->
<div class="row section-gallery">
    <div class="col-md-3">
        …
    </div>
</div>

<!-- Row with 4 elements -->
<div class="row section-gallery">
    <div class="col-md-6">
        …
    </div>
</div>
```
            {{/markdown}}
        </div>

        <div class="col-md-24">
            <div class="guidance guidance-usage m-t-xs">
                {{#markdown}}
{{> grid-guidance.md}}
                {{/markdown}}
            </div>
        </div>

    </div>
</section>
